<template>
<div  class="tc-left pr10 fl">
    <ul class="clearfix uiTab1 mb5 j_outerHeight">
        <!-- <li class="col-md-3 fl uiTab1-active"><a href="javascript:">项</a></li> -->
    </ul>
    <div class="daily_title j_outerHeight">
        <ul class="clearfix">
            <li :class="state===''?'title_cur':''" @click="state='',st_id='',findPmUserInfoList()" data-title="全部">全</li>
            <!-- <li :class="stage===1?'title_cur':''" @click="stage=1,GetProjectManagerListFn()" data-title="试用">S</li>
            <li :class="stage===2?'title_cur':''" @click="stage=2,GetProjectManagerListFn()" data-title="正式">Z</li>
            <li :class="stage===3?'title_cur':''" @click="stage=3,GetProjectManagerListFn()" data-title="加盟">J</li>
            <li :class="stage===4?'title_cur':''" @click="stage=4,GetProjectManagerListFn()" data-title="冻结">D</li> -->
            <li :class="state==='5'?'title_cur':''" @click="state='5',st_id='', findPmUserInfoList()" style="float:right;" data-title="淘汰">L</li>
            <li :class="state==='6'?'title_cur':''" @click="state='6',st_id='5',findPmUserInfoList()" style="float:right;" data-title="已签约">Q</li>
            <!-- <li data-title="不超过10个字是不会出现的" data-title-length="10">S</li>
            <li data-title="我的背景色是蓝色的" data-title-color="#3385ff">Z</li>
            <li class="title_not_allowed">G</li>
            <li style="float:right;">D</li> -->
        </ul>
    </div>
    <div class="contentbox">
        <table class="uiTable j_outerHeight">
            <thead>
                <tr class="tr-show" v-show="!seachIco">
                    <th width="20%">
                        <select class="theadselect thinScroll" v-model="region"  @change="chooseCity()">
                            <option  v-if="Number(this.permission) === 39 "  value="" selected="true"> 全部</option>
                            <option  :value="coupon.id + 'c'" v-for="(coupon,index) in cityList" :key="index+'a'">{{'城-'+coupon.city_name}}</option>
                            <option  :value="coupon.dq_id" v-for="(coupon,index) in colonyList" :key="index+'b'">{{coupon.dq_name}}</option>
                        </select>
                    </th>
                    <th width="20%" class="tx-center">
                       <span class="serial_number" @click="seachIco=true">
                            姓名<i class="bgIcon select-btn"></i>
                        </span>
                    </th>
                    <!-- <th width="15%" class="tx-center">
                       级别
                    </th> -->
                    <th width="15%" class="tx-center">
                        <select class="theadselect thinScroll" v-model="state" @change="findPmUserInfoList()">
                            <option value="">管状</option>
                            <option value="1">正常</option>
                            <option value="2">异常</option>
                            <option value="3">问题</option>
                            <option value="-1">待定</option>
                        </select>
                    </th>
                     <th width="15%" class="tx-center">
                        <select class="theadselect thinScroll" v-model="st_id" @change="findPmUserInfoList()">
                            <option value="">业</option>
                            <option value="1">咨询</option>
                            <option value="2">认知</option>
                            <option value="3">考察</option>
                            <option value="4">签约</option>
                            <!-- <option value="0">签约</option> -->
                        </select>
                    </th>
                        <th width="17%" class="tx-center">
                        <select class="theadselect thinScroll" v-model="userId" @change="findPmUserInfoList()">
                            <option value="">业务</option>
                            <option v-for="(item,index) in cardUserList" :key="index" value="00000079">徐志林</option>
                            <!-- <option value="整改">李四</option>
                            <option value="冻结">王五</option>
                            <option value="处罚">赵六</option> -->
                        </select>
                    </th>
                    <th class="add_center" @click="dialogVisible()" title="" style="font-weight: bold;color: #0098FE;font-size: 26px;cursor: pointer;">
                +
            </th>
                    <!-- <th ><el-button type="primary" icon="el-icon-plus" circle size="mini" data-title="添加信息" @click="dialogVisible()" sytle="margin-left:0px"></el-button></th> -->

                </tr>
                 <tr class="tr-hide" v-show="seachIco">
                    <th>
                        <div class="dailyftSearch clearfix">
                            <div class="fl uiHas-textIcon">
                                <input type="text" class="col-md-12 lesson-title-input" v-model="inpu"
                                    placeholder="姓名/卡号" @keyup.enter="findPmUserInfoList()" >
                                <i class="uiText-searchIcon bgIcon select-cancel-btn" @click="findPmUserInfoList()"></i>
                            </div>
                        </div>
                    </th>
                </tr>
            </thead>
        </table>
        <div class="scroll-content thinScroll thinScroll-table" v-loading="loading" v-scrollHeight="36">
            <table class="uiTable uiTable-striped uiTable-hover" id="tab1">
                <tbody>
                    <tr v-for="(item,index) in recuitList" :key="index+'c'" :class="{'tractive':index == trIndex}" @click="siderBarTrclick(index,item)">
                        <td width="20%">{{item.dq_name}}</td>
                        <td width="20%">{{item.user_name}}</td>
                        <!-- <td width="15%">{{item.user_level}}</td> -->
                        <td width="15%" class="cGreen" v-if="item.importance == 1">正常</td>
                        <td width="15%" class="cRed" v-else-if="item.importance == 2">异常</td>
                        <td width="15%" class="cRed" v-else-if="item.importance == 3">问题</td>
                        <td width="15%" class="cRed" v-else-if="item.importance == -1">待定</td>
                        <td width="15%" v-else>--</td>

                        <td width="15%" v-if="item.stId == 1">咨询</td>
                        <td width="15%" v-else-if="item.stId == 2">认知</td>
                        <td width="15%" v-else-if="item.stId == 3">考察</td>
                        <td width="15%" v-else-if="item.stId == 4">签约</td>
                        <td width="15%" v-else-if="item.stId == 5">签约</td>
                        <td width="15%" v-else>--</td>
                        <td width="17%">{{item.createuser}}</td>
                        <td class="cRed">-999</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="j_outerHeight clearfix tj_bottom">
            <p class="col-md-3" data-title="全部">{{recuitList.length}}</p>
            <p class="col-md-3 cGreen" data-title="正常">0</p>
            <p class="col-md-3 cOrange" data-title="异常">0</p>
            <p class="col-md-3 cRed" data-title="问题">0</p>
        </div>
    </div>
</div>
</template>
<script>
import { mapMutations, mapGetters } from 'vuex'
import {
    getColony,
    getCity,
    findPmUserInfoList
} from '../Resources/Api'
export default {
    data () {
        return {
            loading: false,
            seachIco: false,
            trIndex: 0,
            leftListData: [], // 遍历的数据
            inpu: '',
            state: '',
            st_id: '',
            userId: 0, // 业务员id
            stage: 0,
            dqLishu: 0,
            region: '',
            colonyList: [],
            cityList: [],
            colony_city: [],
            recuitList: [], // 一段左侧信息
            permission: 0,
            regionList: [],
            cardUserList: []
        }
    },
    computed: {
        ...mapGetters(['leftInfo', 'updateLeft'])
    },
    created () {
        this.permission = Number(sessionStorage.getItem('areaId'))
        if (Number(this.permission) === 39) {
            this.region = ''
            this.GetCityInfo()
            this.GetColonyInfo()
        } else {
            this.region = this.permission
            this.GetColonyInfo()
        }
        this.findPmUserInfoList()
    },
    methods: {
        ...mapMutations({
            setLeftData: `SET_LEFT_INFO`
        }),
        dialogVisible () {
            this.$router.push('/projectFiles/Recruit/addpage')
        },
        siderBarTrclick (index, item) {
            this.trIndex = index
            // 保存字段时 一定要确认公共字段一致
            this.setLeftData(item)
            // 关闭弹窗
            this.$router.push(this.$route.matched[1].path)
            $('.j_uiTab9 li').eq(3).click()
        },
        findPmUserInfoList () {
            if (this.region[this.region.length - 1] === 'c') {
                // 城    substring()方法   包含左边角值，不包含右边角值
                this.dqLishu = this.region.substring(0, this.region.length - 1)
            }
            if (this.state === 7) {
                this.state = ''
            }
            // alert(this.st_id)
            findPmUserInfoList({
                stId: this.st_id,
                importance: (Number(this.state) === 6 || this.state === '') ? '' : this.state,
                userName: this.inpu,
                inductionArea: Number(this.region.length) ? 0 : Number(this.region), // 分司
                dqLiShu: Number(this.region.length) ? Number(this.dqLishu) : 0, // 地区id
                userState: 0,
                userType: 1
            }).then(res => {
                this.recuitList = res.data.Body.userInfo
                // debugger
                if (this.recuitList.length === 0) {
                    this.recuitList = []
                }
                this.cardUserList = res.data.Body.cardUserList
                // this.setLeftData(res.data.Body)
                this.siderBarTrclick(this.trIndex, this.recuitList[this.trIndex])
                this.seachIco = false
            }).catch(err => {
                console.log(err)
            })
        },
        GetColonyInfo () {
            let _this = this
            _this.colonyList = []
            getColony({
                region: this.region
            }).then(results => {
                _this.colonyList = results.data.Body
            }).catch(error => {
                console.log(error)
            })
        },
        GetCityInfo () {
            let _this = this
            _this.cityList = []
            getCity({
            }).then(results => {
                _this.cityList = results.data
            }).catch(error => {
                console.log(error)
            })
        },
        chooseCity () {
            this.findPmUserInfoList()
        }
    },
    watch: {
        updateLeft () {
            this.findPmUserInfoList()
        }
        // updatePlate () {
        //     this.findPmUserInfoList()
        // }
        // leftInfo (userState, sId) {
        //     // debugger
        //     if (userState !== undefined && userState !== null) {
        //         if (this.leftInfo.user_state !== -1) {
        //             const findIndex = this.leftListData.findIndex((item) => { return item.uid === this.leftInfo.uid })
        //             if (findIndex >= 0) {
        //                 // this.$set(this.leftListData[findIndex], 'groupUseHour', 168)
        //                 this.findPmUserInfoList()
        //             }
        //         }
        //     }
        //     if (sId !== undefined && sId !== null) {
        //         if (this.leftInfo.stId !== 1) {
        //             this.siderBarTrclick(this.trIndex, this.leftListData[this.trIndex])
        //             const findIndex = this.leftListData.findIndex((item) => { return item.uid === this.leftInfo.uid })
        //             if (findIndex >= 0) {
        //                 this.$set(this.leftListData[findIndex], 'groupUseHour', 168)
        //                 // this.findPmUserInfoList()
        //             }
        //         }
        //     }
        // }
    }
}
</script>
